Horizon plugin documentation

Hi there and thank you for purchasing Horizon! This documentation will cover the ins and outs on how to get your newly-purchased WordPress plugin up and running, fast. Our goal was to make everything as simple and straighforward as possible, so without further delay, let's get started!

Installation
Getting started / Building your menu
Building a post/page-specific menu
Customization
Label visibility
Have a question?

Installation

Installing the plugin couldn't be simpler.

In your WordPress installation, go to Plugins > Add New
Click on Upload Plugin
Use the form there to upload the horizon-by-bonfire.zip file
On the next screen, activate the plugin.

Once you've activated the plugin, you need to build the actual menu. Read the next step for instructions on how to go about that.

Getting started / Building your menu

In your WordPress installation, head to Appearance > Menus, create a new menu and give it any title you'd like
Then, add your newly-created menu to the "Horizon by Bonfire" menu location

Now it's time to start adding actual menu items to your menu.

As Horizon makes use of both the Font Awesome icon set as well as independent animations for the icon and text label, we'll need to build the menu with some extra care and add a few code tags. But fear not, even if you're not familiar with any code whatsoever, you'll be done in just a few minutes.

As mentioned before, each menu item is made up of two components: the icon and the text label. Both are inserted with short pieces of code around them, and into a single textfield. To make a long story short, let's create a quick example menu item and then break it down in detail.

Presuming you're still in Appearance > Menus, find the "Custom Links" box
Into its URL textfield, insert whatever link you'd like
Into its Link Text textfield, copy-paste the following:
Anchor
Click the Add to Menu button

Now check your site and you should see the menu at the top. Now we'll explain what does what.

What you entered into the "Link Text" textfield were both the icon and the text label.

This part is the icon: 
...and this part is the text label: Anchor

The icon

To see the full range of icons available, head to the Font Awesome cheatsheet here: https://fontawesome.com/cheatsheet

As can be seen there, the icons are divided into three groups: Solid Icons, Regular Icons, and Brand Icons. Depending on which icon you use, you'll need to use the appropriate three-letter prefix:

Solid Icons: fas
Regular Icons: far
Brand Icons: fab

You'll most likely be using the Solid Icons most frequently as that's where the widest variety lies, so we'll use its fas prefix in this documentation. If you use an icon from another group, just remember to use its three-letter prefix as listed above.

On the cheatsheet, you'll notice each icon has a short name next to it; "anchor", "music", "search" and so on. To add an icon to your menu item, you need to take this code:  and just replace the anchor part with the icon name of your choice. For example, to insert the binoculars icon, the result would be: 

The text label

Inserting the text label is much easier. Simply enter whatever label you'd like to have between the  tags. For example, Anchor

To sum it up, we'll leave you with an example from each of the three icon groups that you can quickly copy-paste into the WordPress menu builder, with the parts you can modify marked in bold:

Solid Icon: Heartbeat
Regular Icon: Calendar
Brand Icon: WordPress

Building a post/page-specific menu

In update 1.3, we added the capability to add post- and page-specific menus, allowing users to override the default menu with one specific to the post or page the visitor is currently on.

By default, the default Horizon menu you created is displayed site-wide. If you'd like a certain post or page to show a unique menu however, then create a secondary menu as you would normally (follow the detailed instructions above).To apply it to a post or page, simply create a new Custom Field named "horizon" and type the menu's name into its "Value" field.

In case you're not familiar with the WordPress "Custom Fields" feature, you can enable it by clicking on "Screen Options" in the top-right corner while writing a post/page, and ticking "Custom Fields". Once that's done, the Custom Fields box will appear below the editor.

Customization

As of version 3.0, we moved all the settings into the built-in WordPress customization tools. You'll find all the settings placed and explained in detail where necessary under Appearance > Customize > Horizon Plugin, including positioning, colors etc.

As it's a feature some customers like to use to this day, the old way of adding hover colors remains in effect as well. Below are the original inctructions:

You can spice up Horizon a bit by giving any of your menu items a different color. To do so, you only need to add the appropriate class to your menu item.

Into your menu item's "CSS Classes (optional)" textfield, enter either "silver", "green", "blue", "salmon," "red", "orange", or "pink" (without the quotes). And that's all there is to it!

The same colors can be used in the same way on sub-menu items.

NOTE: If you're not seeing the "CSS Classes (optional)" textfield, enable it by clicking on "Screen Options" in the top-right corner of the screen, and ticking "CSS Classes".

Label visibility

As of version 1.7, individual menu items can be made visible by default (allowing users to see both the icon and label without having to hover over the menu item). This can be applied to individual menu items, meaning it's up to you how many items you'd like to make visible: one, few or all.

To make a menu item's label visible, simply add the "label-active" class to the menu item's "CSS Classes" field. This is done on the menu editing page under Appearance > Menus.